import React, { Suspense } from 'react';
import { connect } from 'dva';
import { NavLink, Router, Route, Switch } from 'dva/router';
import './assets/css/app.css'
import { renderRoutes } from 'react-router-config';


import { logout,checkLogin } from './services/user';
// 导入antd布局组件
import { Layout, Menu, Breadcrumb } from 'antd';
// 导入Loading加载组件
import Loading from './components/Loading';

import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
    LockOutlined,
    HomeOutlined,
    BarsOutlined,
    MenuOutlined,
    SettingOutlined,
    PoweroffOutlined
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class App extends React.Component {

    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    };

    componentWillMount(){
        if(!checkLogin()){
            this.props.history.push('/login');
        }
    }

    // 退出登录
    logout() {
        logout() && this.props.history.push('/login');
    }

    render() {
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1">
                            <DesktopOutlined />
                            <span>管理中心</span>
                        </Menu.Item>
                        <SubMenu
                            key="sub1"
                            title={
                                <span>
                                    <UserOutlined />
                                    <span>用户中心</span>
                                </span>
                            }
                        >
                            <Menu.Item key="2">
                                <NavLink to="/users">用户列表</NavLink>
                            </Menu.Item>
                        </SubMenu>

                        <SubMenu
                            key="sub2"
                            title={
                                <span>
                                    <BarsOutlined />
                                    <span>文章管理</span>
                                </span>
                            }
                        >
                            <Menu.Item key="3">
                                <NavLink to="/articles">文章列表</NavLink>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <NavLink to="/classify">分类管理</NavLink>
                            </Menu.Item>
                        </SubMenu>


                        <SubMenu
                            key="sub3"
                            title={
                                <span>
                                    <MenuOutlined />
                                    <span>商品管理</span>
                                </span>
                            }
                        >
                            <Menu.Item key="5">
                                <NavLink to="/product">商品列表</NavLink>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <NavLink to="/category">分类管理</NavLink>
                            </Menu.Item>
                        </SubMenu>

                        <SubMenu
                            key="sub4"
                            title={
                                <span>
                                    <SettingOutlined />
                                    <span>友情链接</span>
                                </span>
                            }
                        >
                            <Menu.Item key="7">
                                <NavLink to="/flinks">友情链接</NavLink>
                            </Menu.Item>
                        </SubMenu>

                        <SubMenu
                            key="sub5"
                            title={
                                <span>
                                    <PieChartOutlined />
                                    <span>示例中心</span>
                                </span>
                            }
                        >
                            <Menu.Item key="8">
                                <NavLink to="/count">计数器</NavLink>
                            </Menu.Item>
                            <Menu.Item key="9">
                                <NavLink to="/message">留言板</NavLink>
                            </Menu.Item>
                        </SubMenu>

                        <Menu.Item key="10">
                            <PoweroffOutlined />

                            <span onClick={() => this.logout()}>安全退出</span>

                        </Menu.Item>

                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-background" style={{ padding: 10, minHeight: '360px' }}>
                            <Suspense fallback={<Loading />}>
                                {renderRoutes(this.props.route.routes)}
                            </Suspense>

                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        )
    }
}

App.propTypes = {

}

export default connect()(App);